{% block sw_cms_el_config_text %}
<sw-tabs
    position-identifier="sw-cms-element-config-text"
    class="sw-cms-el-config-text__tabs"
    default-item="content"
>

    <template #default="{ active }">
        {% block sw_cms_el_config_text_tab_content %}
        <sw-tabs-item
            :title="$tc('sw-cms.elements.general.config.tab.content')"
            name="content"
            :active-tab="active"
        >
            {{ $tc('sw-cms.elements.general.config.tab.content') }}
        </sw-tabs-item>
        {% endblock %}
        {% block sw_cms_el_text_config_tab_options %}
        <sw-tabs-item
            :title="$tc('sw-cms.elements.general.config.tab.settings')"
            name="settings"
            :active-tab="active"
        >
            {{ $tc('sw-cms.elements.general.config.tab.settings') }}
        </sw-tabs-item>
        {% endblock %}
    </template>

    <template
        #content="{ active }"
    >
        {% block sw_cms_el_text_config_content %}
        <sw-container
            v-if="active === 'content'"
            class="sw-cms-el-config-text__tab-content"
        >
            <sw-cms-mapping-field
                v-model:config="element.config.content"
                :label="$tc('sw-cms.elements.text.config.label.content')"
                value-types="string"
            >
                <mt-text-editor
                    :model-value="element.config.content.value"
                    :custom-buttons="customTextEditorButtons"
                    @update:model-value="onInput"
                />

                <template #preview="{ demoValue }">
                    <div class="sw-cms-el-config-text__mapping-preview">
                        <div v-html="$sanitize(demoValue)"></div>
                    </div>
                </template>
            </sw-cms-mapping-field>
        </sw-container>
        {% endblock %}

        {% block sw_cms_el_text_config_settings %}
        <sw-container
            v-if="active === 'settings'"
            class="sw-cms-el-config-text__tab-settings"
        >
            {% block sw_cms_el_text_config_settings_vertical_align %}
            <mt-select
                v-model="element.config.verticalAlign.value"
                :label="$tc('sw-cms.elements.general.config.label.verticalAlign')"
                :placeholder="$tc('sw-cms.elements.general.config.label.verticalAlign')"
                :options="alignmentOptions"
            />
            {% endblock %}
        </sw-container>
        {% endblock %}
    </template>
</sw-tabs>
{% endblock %}
